<template>
    <n-spin size="large" :show="loading">
        <n-space vertical :size="24">
            <n-form label-placement="left" inline :show-feedback="false">
                <n-form-item :span="15" label="城市">
                    <District v-model:code="area" style="width: 300px"></District>
                </n-form-item>
                <n-form-item :span="15">
                    <n-select placeholder="请选择门店" style="width: 400px" filterable :disabled="mchs.length == 0" :options="mchs" @update:value="(v:string) => execLoadMch(v)" />
                </n-form-item>
            </n-form>
            <n-scrollbar :style="{ maxHeight: height, minHeight: height }">
                <n-space vertical :size="24">
                    <n-card v-if="mch.id" size="small">
                        <n-form label-placement="left" inline :show-feedback="false">
                            <n-form-item label="门店名称">
                                <b>{{ mch.name }}</b>
                            </n-form-item>
                            <n-form-item label="入驻时间">
                                <b>{{ mch.time }}</b>
                            </n-form-item>
                            <n-form-item label="门店店长">
                                <b>{{ mch.manager?.name || '未设置店长' }}</b>
                            </n-form-item>
                            <n-form-item label="门店电话">
                                <b>{{ mch.tel }}</b>
                            </n-form-item>
                            <n-form-item label="门店人数">
                                <b>{{ mch.clerks }} 人</b>
                            </n-form-item>
                            <n-form-item label="车辆总数">
                                <b>{{ mch.cars }} 辆车</b>
                            </n-form-item>
                        </n-form>
                    </n-card>
                    <n-grid v-if="mch.id" :cols="30" :x-gap="12">
                        <n-gi :span="15">
                            <n-image-group show-toolbar-tooltip>
                                <n-grid :cols="3" :x-gap="12" :y-gap="12">
                                    <n-gi>
                                        <n-card title="营业执照" size="small" :content-style="{ textAlign: 'center' }">
                                            <n-image object-fit="cover" width="180" height="100" :src="mch.olc.pica" />
                                        </n-card>
                                    </n-gi>
                                    <n-gi v-if="mch.lidc.pica">
                                        <n-card title="法人身份证" size="small" :content-style="{ textAlign: 'center' }">
                                            <n-image object-fit="cover" width="180" height="100" :src="mch.lidc.pica" />
                                        </n-card>
                                    </n-gi>
                                    <n-gi v-if="mch.lidc.picb">
                                        <n-card title="法人身份证" size="small" :content-style="{ textAlign: 'center' }">
                                            <n-image object-fit="cover" width="180" height="100" :src="mch.lidc.picb" />
                                        </n-card>
                                    </n-gi>
                                    <n-gi v-if="mch.oidc.pica">
                                        <n-card title="经营者身份证" size="small" :content-style="{ textAlign: 'center' }">
                                            <n-image object-fit="cover" width="180" height="100" :src="mch.oidc.pica" />
                                        </n-card>
                                    </n-gi>
                                    <n-gi v-if="mch.oidc.picb">
                                        <n-card title="经营者身份证" size="small" :content-style="{ textAlign: 'center' }">
                                            <n-image object-fit="cover" width="180" height="100" :src="mch.oidc.picb" />
                                        </n-card>
                                    </n-gi>
                                    <n-gi>
                                        <n-card title="门头照片" size="small" :content-style="{ textAlign: 'center' }">
                                            <n-image object-fit="cover" width="180" height="100" :src="mch.himg" />
                                        </n-card>
                                    </n-gi>
                                    <n-gi v-if="mch.oimg">
                                        <n-card title="授权文件" size="small" :content-style="{ textAlign: 'center' }">
                                            <n-image object-fit="cover" width="180" height="100" :src="mch.oimg" />
                                        </n-card>
                                    </n-gi>
                                </n-grid>
                            </n-image-group>
                        </n-gi>

                        <n-gi :span="10">
                            <n-card size="small">
                                <n-form label-placement="left" :show-feedback="false">
                                    <n-form-item label="全称">
                                        <b>{{ mch.full }}</b>
                                    </n-form-item>
                                    <n-form-item label="编号">
                                        <b>{{ mch.osno }}</b>
                                    </n-form-item>
                                    <!-- <n-form-item label="税号">
                                        <b>{{ mch.taxno }}</b>
                                    </n-form-item> -->
                                    <n-form-item label="法人">
                                        <b>{{ mch.leader }}</b>
                                    </n-form-item>
                                    <n-form-item label="地区">
                                        <b>{{ mch.area.info }}</b>
                                    </n-form-item>
                                    <n-form-item label="地址">
                                        <b>{{ mch.addr }}</b>
                                    </n-form-item>
                                    <n-form-item label="银行">
                                        <b>{{ mch.withdraw.bank.bank }}</b>
                                    </n-form-item>
                                    <n-form-item label="卡号">
                                        <b>{{ mch.withdraw.bank.card }}</b>
                                    </n-form-item>
                                </n-form>
                            </n-card>
                        </n-gi>
                        <n-gi :span="5">
                            <n-card size="small">
                                <n-space vertical>
                                    <n-button block @click="() => (formActive = true)">门店信息修改</n-button>
                                    <n-button block @click="() => (invoiceActive = true)">发票信息</n-button>
                                    <n-button block @click="() => (statActive = true)">车损违章统计</n-button>
                                    <n-button block @click="() => (configActive = true)">门店配置</n-button>
                                </n-space>
                            </n-card>
                        </n-gi>
                    </n-grid>
                    <n-card v-if="mch.id" size="small" :title="`门店人员（共${clks.length}人）`">
                        <template #header-extra>
                            <n-button @click="() => (clerkInviteActive = true)">邀请人员</n-button>
                        </template>
                        <n-empty :style="{ margin: '48px' }" description="没有人员信息" v-if="clks.length == 0"></n-empty>
                        <n-table :single-line="false" v-else>
                            <thead>
                                <tr>
                                    <th>人员信息</th>
                                    <th>添加时间</th>
                                    <th>合伙车辆</th>
                                    <th>订单统计</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="clk in clks">
                                    <td>
                                        <n-tooltip trigger="hover">
                                            <template #trigger>
                                                <n-button
                                                    size="small"
                                                    quaternary
                                                    type="success"
                                                    @click="
                                                        () => {
                                                            clerk = clk
                                                            clerkViewActive = true
                                                        }
                                                    "
                                                >
                                                    {{ clk.mob || '未设置手机' }} / {{ clk.name }}
                                                </n-button>
                                            </template>
                                            查看 {{ clk.name }} 的详细信息
                                        </n-tooltip>
                                    </td>
                                    <td>{{ clk.create }}</td>
                                    <td>
                                        <n-tooltip trigger="hover">
                                            <template #trigger>
                                                <n-button
                                                    size="small"
                                                    quaternary
                                                    type="success"
                                                    @click="
                                                        () => {
                                                            clerk = clk
                                                            clerkCarActive = true
                                                        }
                                                    "
                                                >
                                                    {{ clk.cars }} 辆车
                                                </n-button>
                                            </template>
                                            查看 {{ clk.name }} 的关联车辆
                                        </n-tooltip>
                                    </td>
                                    <td>
                                        <n-tooltip trigger="hover">
                                            <template #trigger>
                                                <n-button
                                                    size="small"
                                                    quaternary
                                                    type="success"
                                                    @click="
                                                        () => {
                                                            clerk = clk
                                                            clerkOrderActive = true
                                                        }
                                                    "
                                                >
                                                    {{ clk.ocount }} 单 / {{ (clk.ototal / 100).toFixed(2) }} 元
                                                </n-button>
                                            </template>
                                            查看 {{ clk.name }} 的关联订单
                                        </n-tooltip>
                                    </td>
                                    <td>
                                        <n-space>
                                            <n-tooltip trigger="hover">
                                                <template #trigger>
                                                    <n-button
                                                        strong
                                                        size="small"
                                                        @click="
                                                            () => {
                                                                clerk = clk
                                                                clerkFormActive = true
                                                            }
                                                        "
                                                    >
                                                        修改
                                                    </n-button>
                                                </template>
                                                编辑 {{ clk.name }} 的人员资料
                                            </n-tooltip>
                                            <n-tooltip trigger="hover" v-if="!clk.lock.flag">
                                                <template #trigger>
                                                    <n-button
                                                        strong
                                                        type="warning"
                                                        size="small"
                                                        @click="
                                                            () => {
                                                                clerk = clk
                                                                clerkLockActive = true
                                                            }
                                                        "
                                                    >
                                                        封禁
                                                    </n-button>
                                                </template>
                                                禁止 {{ clk.name }} 登录系统
                                            </n-tooltip>
                                            <n-tooltip trigger="hover" v-else>
                                                <template #trigger>
                                                    <n-button
                                                        strong
                                                        type="primary"
                                                        size="small"
                                                        @click="
                                                            () => {
                                                                doClerkUnlock(clk)
                                                            }
                                                        "
                                                    >
                                                        解封
                                                    </n-button>
                                                </template>
                                                解除 {{ clk.name }} 的禁止登录状态
                                            </n-tooltip>
                                            <n-tooltip trigger="hover">
                                                <template #trigger>
                                                    <n-button
                                                        strong
                                                        type="error"
                                                        size="small"
                                                        @click="
                                                            () => {
                                                                doClerkDelete(clk)
                                                            }
                                                        "
                                                    >
                                                        移出
                                                    </n-button>
                                                </template>
                                                将 {{ clk.name }} 移出门店
                                            </n-tooltip>
                                            <n-tooltip trigger="hover">
                                                <template #trigger>
                                                    <n-button
                                                        strong
                                                        size="small"
                                                        @click="
                                                            () => {
                                                                clerk = clk
                                                                clerkResetActive = true
                                                            }
                                                        "
                                                    >
                                                        重绑
                                                    </n-button>
                                                </template>
                                                更改 {{ clk.name }} 的小程序绑定状态
                                            </n-tooltip>
                                        </n-space>
                                    </td>
                                </tr>
                            </tbody>
                        </n-table>
                    </n-card>
                </n-space>
            </n-scrollbar>
        </n-space>
        <Form :item="mch" v-model:show="formActive" v-if="formActive" @refresh="() => execLoadMch(mch.id)"></Form>
        <Config :item="mch" v-model:show="configActive" v-if="configActive"></Config>
        <Stat :item="mch" v-model:show="statActive" v-if="statActive"></Stat>
        <Invoice :item="mch" v-model:show="invoiceActive" v-if="invoiceActive"></Invoice>

        <ClerkInvite :item="mch" v-model:show="clerkInviteActive" v-if="clerkInviteActive" @refresh="() => execLoadMch(mch.id)"></ClerkInvite>
        <ClerkView :item="clerk" v-model:show="clerkViewActive" v-if="clerkViewActive"></ClerkView>
        <ClerkOrder :item="clerk" v-model:show="clerkOrderActive" v-if="clerkOrderActive"></ClerkOrder>
        <ClerkCar :item="clerk" v-model:show="clerkCarActive" v-if="clerkCarActive"></ClerkCar>
        <ClerkForm :item="clerk" v-model:show="clerkFormActive" v-if="clerkFormActive" @refresh="execLoadClerks"></ClerkForm>
        <ClerkLock :item="clerk" v-model:show="clerkLockActive" v-if="clerkLockActive" @refresh="execLoadClerks"></ClerkLock>
        <ClerkReset :item="clerk" v-model:show="clerkResetActive" v-if="clerkResetActive" @refresh="execLoadClerks"></ClerkReset>
    </n-spin>
</template>

<script lang="ts" setup>
import District from '@/comp/func/District.vue'
import { Http } from '@/libs'
import { useStore } from '@/store'
import { computed, onActivated, ref, watch } from 'vue'

import Form from './Form.vue'
import Config from './Config.vue'
import Stat from './Stat.vue'
import Invoice from './Invoice.vue'

import ClerkInvite from './ClerkInvite.vue'
import ClerkView from './ClerkView.vue'
import ClerkOrder from './ClerkOrder.vue'
import ClerkCar from './ClerkCar.vue'
import ClerkForm from './ClerkForm.vue'
import ClerkLock from './ClerkLock.vue'
import ClerkReset from './ClerkReset.vue'

const { $notification: notification } = window
const { $dialog: dialog } = window

const store = useStore()
const loading = computed(() => store.state.loading.flag)
const height = computed(() => store.state.browser.innerHeight - 230 + 'px')

const area = ref<any>(undefined)
watch(area, (nv, _ov) => {
    execLoadMchs(nv)
})

const mchs = ref<any>([])
const mch = ref<any>({})
const clks = ref<any>([])
const clerk = ref<any>({})

const execLoadMchs = (code: any) => {
    mchs.value = []
    mch.value = {}
    Http.post('/ops/biz/merchant/info/query', {
        area: code + '',
        name: '',
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        mchs.value = resp.data.items.map((m: any) => {
            return {
                label: `[${m.id}] ${m.name} - ${m.full}`,
                value: m.id,
            }
        })
    })
}

const execLoadMch = (mid: string) => {
    mch.value = {}
    Http.post('/ops/biz/merchant/info/detail', {
        id: mid,
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        mch.value = resp.data
        execLoadClerks()
    })
}

const execLoadClerks = () => {
    clks.value = []
    if (!mch.value.id) {
        return
    }
    Http.post('/ops/biz/merchant/clerk/list', {
        id: mch.value.id,
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        clks.value = resp.data.items
    })
}

const formActive = ref<boolean>(false)
const configActive = ref<boolean>(false)
const statActive = ref<boolean>(false)
const invoiceActive = ref<boolean>(false)

const clerkInviteActive = ref<boolean>(false)
const clerkViewActive = ref<boolean>(false)
const clerkCarActive = ref<boolean>(false)
const clerkOrderActive = ref<boolean>(false)
const clerkFormActive = ref<boolean>(false)
const clerkLockActive = ref<boolean>(false)
const clerkResetActive = ref<boolean>(false)

const doClerkUnlock = (row: any) => {
    dialog.success({
        title: `提示?`,
        content: `是否解除 [ ${row.name} ] 的登录锁定状态?`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            execClerkUnlock(row.id)
        },
    })
}

const execClerkUnlock = (id: string) => {
    Http.post('/ops/account/key/unlock', {
        ids: [id],
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        execLoadClerks()
        notification.success({
            duration: 1500,
            title: '操作成功',
            content: '您已成功解除人员登录锁定',
        })
    })
}

const doClerkDelete = (row: any) => {
    dialog.error({
        title: `提示?`,
        content: `是否将 [ ${row.name} ] 移出门店?`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            execClerkDelete(row.id)
        },
    })
}

const execClerkDelete = (id: string) => {
    Http.post('/ops/biz/merchant/clerk/remove', {
        id: id,
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        execLoadMch(mch.value.id)
        notification.success({
            duration: 1500,
            title: '操作成功',
            content: '您已成功将人员移出门店',
        })
    })
}

onActivated(() => {
    if (mchs.value.length == 0) {
        execLoadMchs('')
    }
})
</script>
